<?php

?>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="../../Ginecobstetricia/vista/css/bootstrap-combined.min.css" rel="stylesheet">
         <!-- Librerias jquery y hojas de estilo para creacion  del calendario -->
        <script src="../../vista/reportes/js/jquery-1.5.2.js" type="text/javascript"></script>
        <!-- LIBRERIAS JQUERY PARA LA CREACION DE LAS ALERTAS -->
        <script type="text/javascript" src="../../Ginecobstetricia/vista/js/alertify.js"></script>
        <link rel="stylesheet" href="../../Ginecobstetricia/vista/css/alertify.core.css" />
        <link rel="stylesheet" href="../../Ginecobstetricia/vista/css/alertify.default.css" />
        
        <style>
            .white {
                border-radius: 5px;
                color: #606060;
                border: solid 1px #b7b7b7;
                background: #fff;
                background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
                background: -moz-linear-gradient(top,  #fff,  #ededed);
                filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
                padding: 4px 4px 4px;
                height: 30px;
                font-size: 13px;
            }
            .white:hover {
                background: #ededed;
                background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
                background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
                filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
            }
            .white:active {
                color: #999;
                background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
                background: -moz-linear-gradient(top,  #ededed,  #fff);
                filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
            }
            
            /* para las filas impares */
            table tr:nth-child(odd) th {
                background-color: #DAEAFF;
                font-weight: normal;
            }
            /* para las filas paras */
            table tr:nth-child(even) th {
                background-color: #FFFFFF;
                font-weight: normal;
            }
        </style>
        <script>
            function datosP(){
                var tc = 1;
                 $.ajax({
                    async: true,
                    type: "POST",
                    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    url:"../../controlador/php/crudPerfiles.php",
                    data:{tc:tc},
                    success:datosPe
                });
            }
            function datosPe(datos){
                $("#datosa").text("");
                 rpt = $.parseJSON(datos);
                    datos = $("#datosa");
                    var resp = "";
                    resp += "<table style='font-size:90%;overflow:hidden;border:1px solid #d3d3d3;background:#fefefe;width:100%;-moz-border-radius:5px; /* FF1+ */-webkit-border-radius:5px; /* Saf3-4 */border-radius:5px;-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);'>\
                                <tr>\
                                    <td colspan='2' style='padding:1px 1px 1px; text-align:center;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe)); background:#e8eaeb; width:90%;'>\
                                         Descripcion\
                                    </td>\
                                    <td style='padding:1px 1px 1px; text-align:center;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe)); background:#e8eaeb;'>\
                                         Editar\
                                    </td>\
                                </tr>";
                    var con = 1;
                    var descri = "";
                     for(dat in rpt){
                     descri = rpt[dat].didescri;
                     resp += "<tr>\
                                     <th align='center'>\
                                        "+ con +"\
                                    </th>\
                                     <th align='left'>\
                                        "+ rpt[dat].DESCRIPCION +"<input type='hidden' name='' id='Datope"+con+"' value='"+ rpt[dat].DESCRIPCION +"' />\
                                    </th>\
                                    <th>\
                                        <img src='../../vista/imagen/editar2.png' width='20' height='20' alt='editar' title='Editar' onclick='editar("+ con +","+rpt[dat].OID+");'/>\
                                   </th>\
                                 </tr>";
                   con++;
                   } 
                   resp += "</table>";
                   datos.append(resp);
                   //listaItems();
            }
            function nuevo(){
                document.getElementById("nuevoP").innerHTML='<table style="font-size:90%">\
                                                               <tr>\
                                                                   <td style="width:35%">\
                                                                       Nuevo Perfil:\
                                                                   </td>\
                                                                   <td>\
                                                                        <table>\
                                                                            <tr>\
                                                                                <td>\
                                                                                    <input type="text" name="txtnuev" value="" id="perfil" style="width:80%"/>\
                                                                                </td>\
                                                                                <td>\
                                                                                    <img src="../../vista/imagen/aceptar.png" width="20" height="20" onclick="validar();" title="guardar"/>\
                                                                                </td>\
                                                                                <td>\
                                                                                    <img src="../../vista/imagen/cancel.png" width="20" height="20" alt="agregr" onclick="cancelar();" title="cancelar"/>\
                                                                                </td>\
                                                                            </tr>\
                                                                        <table>\
                                                                    </td>\
                                                               </tr>\
                                                           </table>';
            }
            
            function cancelar(){
                document.getElementById("nuevoP").innerHTML='';
            }
            
            function editar(posi,oid){
                var dat = $("#Datope"+posi).val();
                document.getElementById("nuevoP").innerHTML='<table style="font-size:90%">\
                                                               <tr>\
                                                                   <td style="width:35%">\
                                                                       Editar Perfil:\
                                                                   </td>\
                                                                   <td>\
                                                                       <input type="text" name="txtnuev" value="'+dat+'" id="perfil" style="width:80%"/>\
                                                                        <img src="../imagen/gc.png" width="20" height="20" alt="gc" onclick="validarE('+oid+');"/>\
                                                                        <img src="../../vista/imagen/cancel.png" width="20" height="20" alt="agregr" onclick="cancelar();" title="cancelar"/>\
                                                                    </td>\
                                                               </tr>\
                                                           </table>';
            }
            
            function validar(){
                 if ($("#perfil").val()===""){
                    alertify.alert("Digite La Descripcion Del Perfil"), function () {
                        $("#perfil").focus();
                    };
                    return false;
                }
                 var descri = $("#perfil").val();
                 var tc = 2;
                 $.ajax({
                    async: true,
                    type: "POST",
                    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    url:"../../controlador/php/crudPerfiles.php",
                    data:{tc:tc,descri:descri},
                    success:mensaje
                });
            }
            
            function mensaje(){
                $("#perfil").val("");
                datosP();
            }
            
            function validarE(oid){
                if ($("#perfil").val()===""){
                    alertify.alert("Digite La Descripcion Del Perfil"), function () {
                        $("#perfil").focus();
                    };
                    return false;
                }
                 var descri = $("#perfil").val();
                 var tc = 3;
                 $.ajax({
                    async: true,
                    type: "POST",
                    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    url:"../../controlador/php/crudPerfiles.php",
                    data:{tc:tc,descri:descri,oid:oid},
                    success:mensajeE,
                    timeout: 4000
                });
            }
            
            function mensajeE(){
                $("#nuevoP").text("");
                datosP();
            }
            
            function buscar(){
                var descri = $("#buscar").val();
                var tc = 4;
                 $.ajax({
                    async: true,
                    type: "POST",
                    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    url:"../../controlador/php/crudPerfiles.php",
                    data:{tc:tc,descri:descri},
                    success:datosPe
                });
            }
        </script>
    </head>
    <body onload="datosP();">
        <div align="center" style="border-radius: 5px 5px 0px 0px;background:linear-gradient(#B5B5B5, #e8eaeb);;height:10%;width:100%;">
            <table style="width:100%; height:10%;" >
                <tr>
                    <td align="center" width="88.3%">
                        <div style="padding:1.5%;"><b style="margin-left: 200px">CREAR PERFILES</b></div>
                    </td>
                     <td>
                        <input type="text" name="" value="" id="buscar" placeholder="BUSCAR" onKeyUp="buscar();"/>
                    </td>
                </tr>
            </table>

        </div>
        <div style='overflow-y: scroll;height:75%;'>
        <div id="datosa">
            
        </div>
        </div>
        <div style="border-radius: 0 0 5px 5px;background:linear-gradient(#e8eaeb, #B5B5B5);height:15%;width:100%;">
            <div style="padding:1%;">
                <table style="font-size:80%;width:100%">
                    <tr>
                        <td style="width:10%" >
                            <input type="button" value="Nuevo Perfil" class="white" onclick="nuevo();"/>
                        </td>
                        <td style="width:45% ">
                            <div id="nuevoP" ></div>
                        </td>
                        <td align="right" width="4%">
                            <input type="button" class="white" value="Cerrar" onclick="window.close();" />
                        </td>
                    </tr>
                </table>
            </div>
         </div>
    </body>
</html>